import styled from "styled-components";

export const TopRankingWrap = styled.div`
  flex: 1;
  .rankTop {
    height: 100px;
    padding: 20px 0 0 20px;
    display: flex;
    justify-content: space-between;

    .rankTopBox {
      width: 116px;
      height: 51px;
      .rankTopBox-a {
        display: flex;
        flex-direction: column;
        .rankTopName {
          color: #333;
          font-size: 14px;
          font-weight: 700;
        }
        .btn {
          display: inline-block;
          text-indent: -9999px;
          width: 22px;
          height: 22px;
          margin: 8px 10px 0 0;
          cursor: pointer;
        }
        .play {
          background-position: -267px -205px;
          :hover {
            background-position: -267px -235px;
          }
        }
        .favor {
          background-position: -300px -205px;
          :hover {
            background-position: -300px -235px;
          }
        }
      }
    }
  }
  .rankItemBox {
    ul {
      margin-top: 23px;
      li {
        height: 32px;
        line-height: 32px;
        width: 229px;
        padding: 0 10px;

        .rankFlex {
          display: flex;
          :hover .playBox {
            display: block;
          }
          .no {
            display: inline-block;
            width: 35px;
            height: 32px;
            font-size: 16px;
            text-align: center;
          }
          .no-top {
            color: #c10d0c;
          }
          .rankName {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            color: #000;
          }
          .playBox {
            display: none;
            width: 82px;
            button {
              margin-left: 10px;
              :hover {
                cursor: pointer;
              }
              :nth-child(1) {
                margin-left: 0;
              }
            }
            .play {
              background-position: -267px -268px;
              width: 17px;
              height: 17px;
            }

            .addto {
              background-image: url(${require("@/assets/img/sprite_icon2.png")
                .default});
              background-position: 0 -700px;
              position: relative;
              top: 2px;
              width: 17px;
              height: 17px;
            }

            .favor {
              background-position: -297px -268px;
              width: 17px;
              height: 17px;
            }
          }
        }
      }
    }
  }
`;
